<template>
    <div>
        <div style="background-color: white">
            <yb-header></yb-header>
            <div class="sysShwotime">
                <div class="sys1">
                    <div class="description">
                        <h1>简单易用，
                            功能强大。</h1>
                        <p class="desc-font-size">
                            超高颜值、操作简单。
                            多种查询渠道，充分了解油站运行情况，不再受限于时间和空间的约束。
                            在线充值、冻结；查询个人加油记录。
                        </p>
                    </div>
                    <div class="img"></div>
                </div>
                <div class="sys2">
                    <div class="desc1">
                        <h1 style="margin-left: 20px">管理加油机</h1>
                        <ul class="desc-font-size">
                            <li style="color: #45b549"><span style="color: black">支持查询多个加油机</span></li>
                            <li style="color: #ff6652"><span style="color: black">查询加油量总额、加油明细查询</span></li>
                            <li style="color: #69afff"><span style="color: black">随时随地查看信息</span></li>
                        </ul>
                        <img src="../assets/showtime/sys2-1.png"/>
                    </div>
                    <div style="width: 560px; margin-left: 65px; background-color: #f8f8f8">
                        <img src="../assets/showtime/sys2-2.jpg"/>
                        <h1 style="margin-left: 20px">掌握经营数据</h1>
                        <ul class="desc-font-size">
                            <li style="color: #45b549"><span style="color: black">支持查询IC卡信息</span></li>
                            <li style="color: #ff6652"><span style="color: black">查询加油总额、IC卡充值总额</span></li>
                            <li style="color: #69afff"><span style="color: black">查看个人IC卡月充值数据</span></li>
                        </ul>
                    </div>
                </div>
                <div class="sys3">
                    <div style="width: 50%;text-align: center">
                        <img src="../assets/showtime/sys3.png" />
                    </div>
                    <div style="display: flex; flex-flow: column;justify-content: center">
                        <h1>IC卡操作便捷</h1>
                        <div class="desc-font-size">IC卡随时随地充值
                            IC卡可以挂失、解冻、批量充值等操作。</div>
                        <h1>安全问题，
                            您放心。</h1>
                        <div style="font-size: 60px"></div>
                        <div class="desc-font-size">IC卡在一个时间段里多次消费、一次性消费过大，会及时通知您。</div>
                    </div>
                </div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>
<script>
    require('video.js/dist/video-js.css')
    require('vue-video-player/src/custom-theme.css')

    import header from '../packages/header'
    import footer from '../packages/footer.vue'

    export default {
        name: 'hello',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
    }
</script>
<style lang="less">
    @import "../less/variables";

    .sysShwotime {
        display: flex;
        justify-content: center;
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

    .sys1 {
        margin-top: 75px;
        width: 1140px;
        display: flex;
        justify-content: space-between;
        .description {
            width: 376px;
            vertical-align: middle;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }
        .img {
            .full-img;
            width: 664px;
            height: 699px;
            background-image: url("../assets/showtime/sys1.png");
        }
    }

    .sys2 {
        margin-top: 75px;
        width: 1140px;
        display: flex;
        justify-content:flex-end;
        .description {

        }
        .img {
            width: 560px;
        }
    }

    .sys3
    {
        margin-top: 75px;
        width: 1140px;
        display: flex;
        margin-bottom: 75px;
    }
</style>
